import HandleBtn from '@/components/HandleBar/btn';
import type { ProFormColumnsType } from '@/components/Pro';
import { BetaSchemaForm } from '@/components/Pro';
import { AddObjType } from '@/pages/System/TenantryManager/type';
import { sysTenantControllerSave as save } from '@/services/ess/sysTenant';
import { message } from 'antd';
import dayjs from 'dayjs';
import React from 'react';
import { useIntl } from 'umi';

interface DataItem {
  tenantNo: string;
  tenantName: string;
  status: string;
  validTime: string[];
  remark: string;
  userName: string;
  nickName: string;
  manStatus: string;
  phone: string;
}

interface addProps {
  handleAddSubmit: (data: any) => void;
}

const AddModal: React.FC<addProps> = (props) => {
  const { handleAddSubmit } = props;
  const intl = useIntl();
  const [messageApi, contextHolder] = message.useMessage();
  const columns: ProFormColumnsType<DataItem>[] = [
    {
      title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.tenantInformation' }),
      valueType: 'group',
      key: 'group1',
      colProps: { md: 24 },
      columns: [
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.tenantCode' }),
          key: 'tenantNo',
          valueType: 'text',
          dataIndex: 'tenantNo',
          fieldProps: {
            maxLength: 10,
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({ id: 'systemManagement.requiredFields.tenantCode' }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.tenantName' }),
          key: 'tenantName',
          valueType: 'text',
          dataIndex: 'tenantName',
          fieldProps: {
            maxLength: 30,
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({ id: 'systemManagement.requiredFields.tenantName' }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.status' }),
          dataIndex: 'status',
          valueType: 'select',
          initialValue: false,
          valueEnum: new Map([
            [true, intl.formatMessage({ id: 'systemManagement.generalProcedure.enable' })],
            [false, intl.formatMessage({ id: 'systemManagement.generalProcedure.disable' })],
          ]),
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({ id: 'systemManagement.requiredFields.selectStatus' }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.termOfValidity' }),
          key: 'validTime',
          dataIndex: 'validTime',
          initialValue: [dayjs(), dayjs().add(2, 'year')],
          colProps: { md: 24 },
          valueType: 'dateRange',
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({
                  id: 'systemManagement.requiredFields.validityPeriod',
                }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.remarks' }),
          key: 'remark',
          dataIndex: 'remark',
          valueType: 'textarea',
          colProps: { md: 24 },
          fieldProps: {
            placeholder: intl.formatMessage({
              id: 'systemManagement.tenantManagementMenu.noMoreThan140Words',
            }),
            maxLength: 140,
          },
        },
      ],
    },
    {
      title: intl.formatMessage({
        id: 'systemManagement.tenantManagementMenu.administratorInformation',
      }),
      valueType: 'group',
      key: 'group2',
      colProps: { md: 24 },
      columns: [
        {
          title: intl.formatMessage({
            id: 'systemManagement.tenantManagementMenu.administratorUsername',
          }),
          dataIndex: 'userName',
          fieldProps: {
            maxLength: 15,
          },
          key: 'userName',
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({
                  id: 'systemManagement.requiredFields.adminUsername',
                }),
              },
              {
                pattern: new RegExp(/^[^\u4e00-\u9fa5]+$/, 'g'),
                message: intl.formatMessage({
                  id: 'systemManagement.requiredFields.noChineseCharacters',
                }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({
            id: 'systemManagement.tenantManagementMenu.administratorName',
          }),
          dataIndex: 'nickName',
          key: 'nickName',
          fieldProps: {
            maxLength: 30,
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({ id: 'systemManagement.requiredFields.adminName' }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.status' }),
          key: 'manStatus',
          dataIndex: 'manStatus',
          valueType: 'select',
          initialValue: '1',
          valueEnum: new Map([
            ['1', intl.formatMessage({ id: 'systemManagement.generalProcedure.enable' })],
            ['0', intl.formatMessage({ id: 'systemManagement.generalProcedure.disable' })],
          ]),
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({ id: 'systemManagement.requiredFields.selectStatus' }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.contactNumber' }),
          dataIndex: 'phone',
          key: 'phone',
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({
                  id: 'systemManagement.requiredFields.contactNumber',
                }),
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: intl.formatMessage({
                  id: 'systemManagement.requiredFields.validMobileNumber',
                }),
              },
            ],
          },
        },
      ],
    },
  ];
  const addDefaultValue: AddObjType = {
    tenantryCode: '',
    tenantryName: '',
    status: true,
  };
  return (
    <>
      {contextHolder}
      <BetaSchemaForm<DataItem>
        title={intl.formatMessage({ id: 'systemManagement.tenantManagementMenu.addTenant' })}
        grid={true}
        labelCol={{
          flex: `0 0 120px`,
        }}
        modalProps={{
          destroyOnClose: true,
        }}
        colProps={{ md: 12 }}
        layoutType="ModalForm"
        trigger={
          <HandleBtn handleType="add">
            {intl.formatMessage({ id: 'systemManagement.generalProcedure.new' })}
          </HandleBtn>
        }
        layout="horizontal"
        columns={columns}
        initialValues={addDefaultValue}
        onFinish={async (values) => {
          const submitParams: API.SysTenant = {
            tenantNo: values?.tenantNo,
            tenantName: values?.tenantName,
            status: values?.status as any,
            startTime: values?.validTime[0],
            expireTime: values?.validTime[1],
            remark: values?.remark,
            manager: {
              userName: values?.userName,
              nickName: values?.nickName,
              status: values?.manStatus,
              phone: values?.phone,
            },
          };
          const message = await save(submitParams);
          if (message.code === 200) {
            messageApi.open({
              type: 'success',
              content: intl.formatMessage({ id: 'global.addSuccessfully' }),
            });
            handleAddSubmit(true);
            return true;
          }
        }}
      ></BetaSchemaForm>
    </>
  );
};

export default AddModal;
